<template>
  <!--  发布文章设置-->
  <div v-loading="loading">
    <!-- 发表博客Drawer -->
    <el-drawer
        :visible.sync="publishDrawer"
        destroy-on-close
        direction="rtl"
        title="博客设置"
        :before-close="closePublishDrawer">
      <!--      发布博客信息设置-->
      <el-form ref="blogForm" label-position="top" :model="blogData" size="small" class="drawer-content">
        <el-form-item label="博客标题：" prop="title">
          <el-input v-model="blogData.title" placeholder="请输入文章标题"/>
        </el-form-item>
        <el-form-item label="博客路径：" prop="url">
          <el-input v-model="blogData.url" placeholder="请输入文章访问路径，默认为文章标题"/>
        </el-form-item>
        <el-form-item label="允许评论：" prop="allowComment">
          <el-radio-group v-model="blogData.allowComment">
            <el-radio label="1">允许</el-radio>
            <el-radio label="0">不允许</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="置顶数值：" prop="topRank">
          <el-input-number v-model="blogData.topRank" controls-position="right" style="width: 100%"/>
          <p class="input-tips">* 值越大越靠前</p>
        </el-form-item>
        <el-form-item label="博客分类：" prop="categoryId">
          <el-select v-model="blogData.categoryId" placeholder="请选择博客分类" filterable>
            <el-option
                v-for="category in categoryList"
                :key="category.id"
                :value="category.id"
                :label="category.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="博客标签：" prop="tags">
          <el-select
              v-model="selectedTagList"
              multiple
              filterable
              clearable
              allow-create
              placeholder="请选择文章标签"
          >
            <el-option
                v-for="tag in tagList"
                :key="tag.id"
                :label="tag.name"
                :value="tag.id"
            />
          </el-select>
          <p class="input-tips">* 可以选择已有标签或输入新标签</p>
        </el-form-item>
        <el-form-item label="博客摘要：" prop="summary">
          <el-input v-model="blogData.summary" :rows="5" type="textarea" placeholder="不填写会自动生成"/>
        </el-form-item>
        <el-form-item label="博客封面：" prop="thumbnail">
          <div @click="selectAttachment">
            <el-tooltip effect="dark" placement="top" content="点击选择封面图片">
              <v-image :src="blogData.thumbnail" class="thumbnail">
                <div slot="error" class="placeholder">
                  <div class="text">No Thumbnail</div>
                </div>
              </v-image>
            </el-tooltip>
          </div>
          <el-input v-model="blogData.thumbnail" clearable placeholder="请输入图片链接或选择图片"/>
        </el-form-item>
      </el-form>

      <div class="footer-toolbar" style="width: 30%">
        <el-button v-if="this.blogData.id" type="primary" size="medium" @click="updateBlog">更 新</el-button>
        <el-button type="primary" size="medium" @click="addBlog">发 表</el-button>
      </div>

      <el-drawer
          title="附件"
          :append-to-body="true"
          :before-close="handleClose"
          :visible.sync="innerDrawer">
        <div style="padding: 12px">
          <v-empty-data v-if="attachmentList.length===0" style="width: 100px"/>
          <el-row v-loading="listLoading" :gutter="20">
            <el-col v-for="(attachment,index) in attachmentList" :key="attachment.id" :xs="12" :sm="12">

              <div class="img" @click="checkImage(index)">
                <v-image :src="baseUrl +attachment.thumbPath" :alt="attachment.name">
                  <div slot="error">
                    <i v-if="attachment.mediaType.search('image') !== -1" class="el-icon-picture-outline"/>
                    <span v-else>{{ attachment.mediaType }}</span>
                  </div>
                </v-image>
              </div>
              <div class="name" :title="attachment.name">{{ attachment.name }}</div>

            </el-col>
          </el-row>
        </div>
        <el-pagination
            @size-change="getAttachmentList"
            @current-change="getAttachmentList"
            :current-page="currentPage"
            :page-sizes="[10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
import {addBlog, updateBlog} from "@/api/blog/blog";
import {getAllCategoryList} from "@/api/blog/category";
import {getTagLists} from "@/api/blog/tag";
import {getAttachmentList} from "@/api/blog/attachment";

export default {
  name: "Setting",
  components: {
    'v-image': () => import('@/components/common/simple-image'),
    "v-empty-data": () => import("@/components/common/empty-data")
  },
  data() {
    return {
      loading: false,
      publishDrawer: false,
      drawer: false,
      //子抽屉开关
      innerDrawer: false,
      blogData: {
        title: '',
        url: '',
        summary: '',
        thumbnail: '',
        topRank: 0,
        categoryId: "",
        tags: [],
        allowComment: 1,
      },
      categoryList: [],
      tagList: [],
      selectedTagList: [],
      //选择附件
      currentPage: 0,
      pageSize: 10,
      total: 0,
      attachmentList: [],
      listLoading: false
    }
  },
  created() {
    this.getAllTagList()
    this.getAllCategoryList()
    this.getAttachmentList()
  },
  methods: {
    //打开抽屉，供父组件调用
    openDrawer() {
      this.publishDrawer = true
    },
    //设置表单值，由父组件调用
    setData(data) {
      this.blogData = JSON.parse(JSON.stringify(data))
      if (!this.blogData.category) {
        this.blogData.category = {id: null, name: ''}
      }
      this.selectedTagList = []
      for (const tag of this.blogData.tags) {
        this.selectedTagList.push(tag.id)
      }
    },
    //关闭前的操作
    closePublishDrawer(done) {
      this.$emit("handleClose", this.blogData)
      this.publishDrawer = false
      done()
    },
    //选择封面
    selectAttachment() {
      this.innerDrawer = true
    },
    //发布文章
    addBlog() {
      this.loading = true
      this.paramTagList()
      const data = this.blogData
      addBlog(data).then(res => {
        this.$message.success(res.message)
        this.loading = false
        this.$router.push("/blog/list")
      })
    },
    updateBlog() {
      this.loading = true
      this.paramTagList()
      const data = this.blogData
      updateBlog(data).then(res => {
        this.$message.success(res.message)
        this.loading = false
        this.$emit("handleClose", this.blogData)
        this.publishDrawer = false
      })
    },
    //格式化标签列表
    paramTagList() {
      this.blogData.tags = []
      for (const tagId of this.selectedTagList) {
        let isFound = false
        for (const tag of this.tagList) {
          if (tagId === tag.id) {
            isFound = true
            this.blogData.tags.push({id: tag.id, name: tag.name})
            break
          }
        }
        if (!isFound) {
          this.blogData.tags.push({name: tagId})
        }
      }
    },

    getAllTagList() {
      getTagLists().then(res => {
        this.tagList = res.data
      })
    },
    getAllCategoryList() {
      getAllCategoryList().then(res => {
        this.categoryList = res.data
      })
    },
    //子抽屉开关
    handleClose() {
      this.innerDrawer = false
    },
    //获取附件列表
    getAttachmentList() {
      this.listLoading = true
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getAttachmentList(params).then(res => {
        this.attachmentList = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
        this.listLoading = false
      })
    },
    //选择
    checkImage() {
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 0 20px;
  margin-bottom: 100px;
}

.el-select {
  width: 100%;
}

.input-tips {
  margin: 0;
  padding: 0;
  color: #8c939d;
  font-size: 10px;
}

.thumbnail {
  margin-bottom: 5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

.thumbnail > .placeholder {
  width: 100%;
  transition: all .5s;
}

.placeholder > .icon {
  font-size: 100px;
}

.placeholder > .text {
  text-align: center;
  font-size: 20px;
  color: white;
}


.footer-toolbar {
  z-index: 2000;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background-color: #fff;
  border-top: 1px #e8e8e8 solid;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .03);
  text-align: right;
}
</style>
